<script setup lang='ts'>
  import { getAssetsFile, nameFilter } from '@/utils/public';
  import theme from '@/utils/theme';
  import xmimg from '@/components/xmimg.vue';
  import integralbox from '@/components/integral.vue';
  import { storeToRefs } from 'pinia'; 
  import { userStore } from '@/pinia/modules/user'
  const UseUserStore = userStore()
  const { lastWinner } = storeToRefs(UseUserStore)
</script>

<template>
  <div v-if="lastWinner.user_id" class="firstUser">
    <xmimg :src="theme.firstUserBack" />
    <div class="userinfo">
      <div class="userimg">
        <img :src="lastWinner.image" class="portrait">
        <img :src="getAssetsFile(`ranking1.png`,'images')" class="border">
      </div>
      <div class="nickName">{{ nameFilter(lastWinner.name) }}</div>
      <integralbox class="integralbox" :score="lastWinner.score" />
      <div class="guildName">所在公会：{{ lastWinner.unionName }}</div>
    </div>
  </div>
</template>

<style lang='scss' scoped>
  .firstUser {
    position: relative;
    margin-top: 40px;
    width: 100%;
    height: 326px;
    .userinfo {
      z-index: 1;
      position: absolute;
      top: 71px;
      left: 50%;
      transform: translateX(-50%);
      width: 245px;
      .userimg {
        z-index: 1;
        position: relative;
        width: 104px;
        height: 104px;
        margin: 0 auto;
        .portrait {
          z-index: -1;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          width: 72px;
          height: 72px;
          border-radius: 100%;
        }
        .border {
          width: 100%;
          height: 100%;
        }
      }
      .nickName {
        line-height: 22px;
        font-size: 16px;
        font-weight: 500;
        color: $fontColor;
        text-align: center;
      }
      .integralbox {
        margin: 4px auto;
      }
      .guildName {
        width: 100%;
        height: 32px;
        line-height: 32px;
        color: $fontColor;
        font-size: 12px;
        font-weight: 400;
        text-align: center;
        margin-top: 8px;
        background: $firstGuildNameBack;
        box-shadow: inset 0px 2px 0px 0px rgba(0,0,0,0.5);
        border-radius: 0px 0px 10px 10px;
      }
    }
  }
</style>